<template>
    <view class="teamData wanl-list">
        <view class="teamData-item-top">
            <view class="item-top">
                <text style="display: block; padding-bottom: 10rpx">团队人数：</text>
                {{ teamData.count }}
            </view>
            <view class="item-top">
                <text style="display: block; padding-bottom: 10rpx">累计收益：</text>
                {{ teamData.sum }}
            </view>
        </view>
        <view class="head">
            <view class="cue">
                <view class="bar" style="justify-content: space-around">
                    <view class="item" :class="{ current: tabCurrentIndex === 0 }" @tap="tabClick(0)">团队列表</view>
                    <view class="item" :class="{ current: tabCurrentIndex === 1 }" @tap="tabClick(1)">收益列表</view>
                </view>
            </view>
        </view>
        <view class="item-bottom" v-if="tabCurrentIndex === 0">
            <view class="bottom" v-for="(item, index) in teamList" :key="index">
                <view class="left">
                    <image :src="item.avatar" mode="scaleToFill" />
                </view>
                <view class="right">
                    <text class="right-text"> {{ item.nickname }}</text>
                    <text class="right-text2"> {{ item.createtime }} </text>
                </view>
            </view>
        </view>
        <view class="item-bottom" v-if="tabCurrentIndex === 1">
            <view class="bottom" v-for="(item, index) in teamList" :key="index">
                <view class="left">
                    <image :src="item.user.avatar" mode="scaleToFill" />
                </view>
                <view class="right">
                    <text class="right-text"> {{ item.user.nickname }}</text>
                    <text class="right-text2"> {{ item.createtime }} </text>
                </view>
                <view class="center">
                    <text> {{ item.money }} </text>
                </view>
            </view>
        </view>
        <wanl-empty v-if="teamList.length === 0" src="collect_default3x" text="暂无数据" />
    </view>
</template>
<script>
export default {
    name: "teamData",
    mixins: [],
    props: {},
    data() {
        return {
            tabCurrentIndex: 0, //tabs选项卡
            teamData: {}, //团队人数和累计收益
            current_page: 1, //当前页
            total: 0, //总条数
            teamList: [], //团队人数列表
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    onLoad(options) {
        this.getTeamList(); //获取团队列表
        this.getTeamNum(); //获取团队人说和和累计收益
    },
    onReachBottom() {
        //判断是否最后一页
        if (this.total >= this.teamList.length) {
            return;
        } else {
            this.current_page = this.current_page + 1; //页码+1
            if (this.tabCurrentIndex == 0) {
                this.getTeamList(); //获取团队列表
            } else if ((this.tabCurrentIndex = 1)) {
                this.getIncomeList(); //获取团队列表
            }
        }
    },
    methods: {
        //顶部tab点击
        tabClick(index) {
            this.current_page = 1;
            this.tabCurrentIndex = index;
            this.teamList = [];
            if (index == 0) {
                this.getTeamList(); //获取团队列表
            } else if (index == 1) {
                this.getIncomeList(); //获取团队列表
            }
        },
        //获取团队人说和和累计收益
        async getTeamNum() {
            await uni.request({
                url: "/increased.index/GetMyInfo",
                method: "POST",
                success: (res) => {
                    this.teamData = res.res.data;
                },
                fail: (error) => {},
            });
        },
        //获取团队列表
        async getTeamList() {
            await uni.request({
                url: "/increased.index/GetMyTeam",
                method: "POST",
                data: {
                    page: this.current_page,
                },
                success: (res) => {
                    console.log(res.res, "-----------as--");
                    if (this.teamList == undefined) {
                        this.teamList = res.res.data.data;
                    } else {
                        this.teamList = [...this.teamList, ...res.res.data.data];
                    }
                    this.current_page = res.res.data.current_page; //当前页
                    this.total = res.res.data.total; //总条数
                },
                fail: (error) => {},
            });
        },
        //团队收益
        async getIncomeList() {
            await uni.request({
                url: "/increased.index/GetMyCommission",
                method: "POST",
                data: {
                    page: this.current_page,
                },
                success: (res) => {
                    console.log(res.res, "-------------");
                    if (this.teamList == undefined) {
                        this.teamList = res.res.data.data;
                    } else {
                        this.teamList = [...this.teamList, ...res.res.data.data];
                    }
                    this.current_page = res.res.data.current_page; //当前页
                    this.total = res.res.data.total; //总条数
                },
                fail: (error) => {},
            });
        },
    },
};
</script>
<style lang="scss" scoped>
body,
html {
    background: #f7f7f7;
}
.teamData {
    .teamData-item-top {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-around;
        .item-top {
            text-align: center;
            width: 45%;
            padding: 30rpx 60rpx;
            background: #fff;
            border-radius: 20rpx;
        }
    }
    .item-bottom {
        .bottom {
            margin: 20rpx 25rpx;
            border-radius: 20rpx;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 30rpx;
            .left {
                width: 120rpx;
                height: 120rpx;
                margin-right: 20rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 20rpx;
                }
            }
            .right {
                .right-text {
                    display: block;
                }
                .right-text2 {
                    display: block;
                    color: #999;
                    padding-top: 20rpx;
                }
            }
            .center {
                margin: 0 0 0 auto;
                color: #ff4f00;
            }
        }
    }
}
</style>
